/*
描述：用户注册页面视图组件，包含注册表单和导航功能
完成人：何艺珲
完成时间: 2025/04/26
*/

<script setup lang="ts">
import { useRouter } from 'vue-router';
import MainRegister from '@/components/RegisterView/MainRegister.vue';

const router = useRouter();

const goToHome = () => {
  router.push('/home');
};

const goToLogin = () => {
  router.push('/login');
};

</script>

<template>

  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <div class="logo">
          <a>
            <svg width="27.000000" height="30.000000" viewBox="0 0 27 30" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
              <desc>
                Created with Pixso.
              </desc>
              <defs/>
              <rect id="矩形 1" width="27.000000" height="30.000000" fill="#FFFFFF" fill-opacity="1.000000"/>
              <path id="path" d="M22.87 27L22.87 19L26 19L26 30L1 30L1 19L4.12 19L4.12 27L22.87 27Z" fill="#BCBBBB" fill-opacity="1.000000" fill-rule="nonzero"/>
              <path id="path" d="M18.7 0L16.5 1.61L24.79 12.29L27 10.68L18.7 0ZM22.59 14.81L11.88 6.25L13.66 4.23L24.37 12.8L22.59 14.81ZM8.31 12.19L20.91 17.84L22.06 15.42L9.46 9.77L8.31 12.19ZM6.42 19.05L20.65 21.02L20.83 18.62L6.91 16.05L6.42 19.05ZM20.7 25L6 25L6 21.97L20.7 21.97L20.7 25Z" fill="#F48024" fill-opacity="1.000000" fill-rule="nonzero"/>
            </svg>
          </a>
          <span>|</span>
          <span style="color: black">SWPUFORUM</span>
        </div>
        <div style="display: flex; justify-content: flex-end; align-items: center; gap: 10px;">
          <el-button @click="goToLogin">登录</el-button>
          <el-button @click="goToHome" type="primary"  color="#1B75D0">回到首页</el-button>
        </div>
      </el-header>
      <el-container>
        <el-main class="body">
          <MainRegister />
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>

<style scoped>

*{
  background-color: #F9FAFA;
}

.header{
  background-color:white;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  border-bottom:2px solid #D6D9DC;
  border-top: 2px solid #E7700D;
  position: fixed;
}

.body {
  height: 100vh;
  background-color: #F1F2F3;
  padding: 200px 0 0 0;
  display: flex;
  flex-direction: column;  /* 垂直排列 */
  align-items: center;     /* 水平居中（交叉轴方向） */
}



.logo{
  display: flex;
  align-items: center;
  width: 100px;
  height: 40px;
  background-color: white;
  cursor: pointer;
  margin-left: 270px;
}
.logo span{
  background-color: white;
  margin-left: 7px;
  font-size: 20px;
  color: #BCBBBB;

}



</style>
